<template>
  <div class="bottomRightCorner publicZIndexBottomRightCorner" ref="bottomRightCorner">
    <!-- <bubble ref="bubble" v-if="giftSendVisible" /> -->
    <img
      class="item"
      src="@/assets/image/hdBar/dsgsicon.png"
      v-tap="{ methods: openPopupModule, key: tipModuleKey }"
    />
    <img
      class="item"
      src="@/assets/image/hdBar/photoIcon.png"
      v-tap="{ methods: openPopupModule, key: photoModuleKey }"
      v-if="giftSendVisible"
    />
    <!-- <img class="item" src="@/assets/image/hdBar/hbkdIcon.png" v-tap="{ methods: openPopupModule, key: hbkdModuleKey }" v-if="hbkdVisible" /> -->
    <img
      class="item"
      src="@/assets/image/hdBar/songhotIcon.png"
      v-tap="{ methods: handleChooseSongClick }"
      v-if="chooseSongVisible"
    />
  </div>
</template>
<script>
// import bubble from '@/components/bubble/bubble2.vue';
import { mapMutations, mapState } from 'vuex';
import { POPUP_MODULE } from '@/assets/constant/index';

// const wx = require('weixin-js-sdk');

export default {
  name: 'bottomRightCorner',
  computed: {
    ...mapState({
      remainMoney: (state) => state.live.remainMoney,
      giftSendVisible: (state) => state.app.giftSendVisible,
      chooseSongVisible: (state) => state.app.chooseSongVisible,
      hbkdVisible: (state) => state.app.hbkdVisible,
      photographerVisible: (state) => state.app.photographerVisible,
      musicMode: (state) => state.app.musicMode,
    }),
  },
  data() {
    return {
      tipModuleKey: POPUP_MODULE.tipModule.key,
      qrcodeModuleKey: POPUP_MODULE.qrcodeModule.key,
      photoModuleKey: POPUP_MODULE.photoModule.key,
      hbkdModuleKey: POPUP_MODULE.hbkdModule.key,
      chooseSongModuleKey: POPUP_MODULE.chooseSongModule.key,
      chooseSingerModuleKey: POPUP_MODULE.chooseSingerModule.key,
    };
  },
  // watch: {
  //   giftSendVisible: function giftSendVisible(newVal) {
  //     if (newVal) {
  //       this.$nextTick(() => {
  //         this.$refs.bubble.init();
  //       });
  //     }
  //   },
  // },
  mounted() {
    // if (this.giftSendVisible) {
    //   this.$nextTick(() => {
    //     this.$refs.bubble.init();
    //   });
    // }
  },
  beforeDestroy() {},
  // components: { bubble },
  methods: {
    ...mapMutations({
      togglePopup: 'app/togglePopup',
    }),
    openPopupModule(e) {
      this.togglePopup(e.key);
    },
    handleChooseSongClick() {
      // 如果 musicMode === '1'，打开选歌手，否则打开选歌曲
      const key = this.musicMode === '1' ? this.chooseSingerModuleKey : this.chooseSongModuleKey;
      this.togglePopup(key);
    },
  },
};
</script>
<style lang="less" scoped>
img {
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;

  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}
.bottomRightCorner {
  width: 154px;
  position: absolute;
  right: 24px;
  bottom: 460px;
  .item {
    width: 155px;
    height: 155px;
    margin-top: 12px;
  }
}

@media screen and (max-height: 709px) {
  .bottomRightCorner {
    .item {
      transform: scale(0.8);
      margin-top: -4vw;
    }
  }
}
</style>
